<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue';

const props: any = defineProps<{
    ujt?: any;
    room?: any;
}>();
const { $fn } = props.ujt;
const chatData: any = reactive({
    list: [],
    send: {
        msg: '1111111111',
    },
});

const chatContainer = ref<HTMLElement>();
const isScrolling = ref(false);

const wsname = props?.room?.wsname || 'web';
$fn.useWs(props.ujt, wsname);
$fn.ws[wsname].init().then(() => {
    console.log(666.0, $fn.ws[wsname]);
    $fn.ws[wsname].wsWatch(
        {
            ty: 'chat/weblist',
        },
        (res: any) => {
            console.log(666.001, res);
            chatData.list.unshift(...res.db);
            // 滚动到底部
            nextTick(() => {
                scrollToBottom();
            });
        }
    );
});

function sendSubmit() {
    if (!chatData.send.msg.trim()) return;
    
    $fn.ws[wsname]
        .wsApi({
            ty: 'chat/websend',
            db: chatData.send,
        })
        .then(() => {
            chatData.send.msg = '';
            nextTick(() => {
                scrollToBottom();
            });
        });
}

function scrollToBottom() {
    if (chatContainer.value && !isScrolling.value) {
        isScrolling.value = true;
        chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
        setTimeout(() => {
            isScrolling.value = false;
        }, 100);
    }
}

function handleKeyPress(event: KeyboardEvent) {
    if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        sendSubmit();
    }
}

onMounted(() => {
    scrollToBottom();
});
</script>

<template>
    <div class="as-chat-room">
        <!-- 聊天头部 -->
        <div class="as-chat-header">
            <slot name="chatheader">
                <div class="as-chat-header-content">
                    <div class="as-chat-back-btn">
                        <span class="back-icon">←</span>
                    </div>
                    <div class="as-chat-info">
                        <div class="as-chat-avatar">
                            <div class="avatar-placeholder">💬</div>
                        </div>
                        <div class="as-chat-details">
                            <div class="as-chat-tit">{{ room?.tit || '聊天室' }}</div>
                            <div class="as-chat-status">在线</div>
                        </div>
                    </div>
                    <div class="as-chat-actions">
                        <button class="action-btn">···</button>
                    </div>
                </div>
            </slot>
        </div>
        
        <!-- 聊天主体 -->
        <div class="as-chat-body" ref="chatContainer">
            <slot name="chatbody">
                <div class="as-chat-con">
                    <div 
                        v-for="(item, index) in chatData.list" 
                        :key="index"
                        class="message-container"
                        :class="{
                            'message-sent': item.isSent,
                            'message-received': !item.isSent
                        }"
                    >
                        <div class="message-avatar" v-if="!item.isSent">
                            <div class="avatar">💬</div>
                        </div>
                        <div class="message-bubble">
                            <div class="message-content">{{ item.msg }}</div>
                            <div class="message-time">{{ item.time || '刚刚' }}</div>
                        </div>
                        <div class="message-avatar" v-if="item.isSent">
                            <div class="avatar">👤</div>
                        </div>
                    </div>
                    
                    <!-- 空状态 -->
                    <div v-if="chatData.list.length === 0" class="empty-state">
                        <div class="empty-icon">💭</div>
                        <div class="empty-text">还没有消息，开始聊天吧</div>
                    </div>
                </div>
            </slot>
        </div>
        
        <!-- 聊天底部 -->
        <div class="as-chat-footer">
            <slot name="chatfooter">
                <div class="as-chat-footer-main">
                    <div class="as-chat-opt">
                        <button class="opt-btn">😊</button>
                        <button class="opt-btn">📎</button>
                    </div>
                    <div class="as-chat-input">
                        <textarea
                            v-model="chatData.send.msg"
                            placeholder="请输入消息..."
                            @keypress="handleKeyPress"
                            rows="1"
                        ></textarea>
                    </div>
                    <div class="as-chat-btn">
                        <button 
                            class="send-btn" 
                            @click="sendSubmit"
                            :disabled="!chatData.send.msg.trim()"
                        >
                            发送
                        </button>
                    </div>
                </div>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
.as-chat-room {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    
    .as-chat-header {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 12px 16px;
        
        .as-chat-header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .as-chat-back-btn {
                .back-icon {
                    font-size: 20px;
                    cursor: pointer;
                    padding: 8px;
                    border-radius: 50%;
                    transition: background-color 0.2s;
                    
                    &:hover {
                        background-color: rgba(0, 0, 0, 0.05);
                    }
                }
            }
            
            .as-chat-info {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .as-chat-avatar {
                    .avatar-placeholder {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: linear-gradient(45deg, #667eea, #764ba2);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 18px;
                        color: white;
                    }
                }
                
                .as-chat-details {
                    .as-chat-tit {
                        font-size: 16px;
                        font-weight: 600;
                        color: #333;
                        margin-bottom: 2px;
                    }
                    
                    .as-chat-status {
                        font-size: 12px;
                        color: #666;
                    }
                }
            }
            
            .as-chat-actions {
                .action-btn {
                    background: none;
                    border: none;
                    font-size: 18px;
                    cursor: pointer;
                    padding: 8px;
                    border-radius: 50%;
                    transition: background-color 0.2s;
                    
                    &:hover {
                        background-color: rgba(0, 0, 0, 0.05);
                    }
                }
            }
        }
    }
    
    .as-chat-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        
        .as-chat-con {
            min-height: 100%;
            
            .message-container {
                display: flex;
                align-items: flex-end;
                margin-bottom: 16px;
                animation: messageSlideIn 0.3s ease-out;
                
                &.message-sent {
                    justify-content: flex-end;
                    
                    .message-bubble {
                        background: linear-gradient(135deg, #95ec69, #5cdb3c);
                        color: white;
                        border-radius: 18px 18px 4px 18px;
                        
                        .message-time {
                            text-align: right;
                        }
                    }
                }
                
                &.message-received {
                    justify-content: flex-start;
                    
                    .message-bubble {
                        background: white;
                        color: #333;
                        border-radius: 18px 18px 18px 4px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                    }
                }
                
                .message-avatar {
                    margin: 0 8px;
                    
                    .avatar {
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        background: linear-gradient(45deg, #ff6b6b, #ffa726);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                    }
                }
                
                .message-bubble {
                    max-width: 70%;
                    padding: 12px 16px;
                    position: relative;
                    transition: transform 0.2s;
                    
                    &:hover {
                        transform: translateY(-1px);
                    }
                    
                    .message-content {
                        font-size: 14px;
                        line-height: 1.4;
                        word-wrap: break-word;
                    }
                    
                    .message-time {
                        font-size: 11px;
                        color: rgba(255, 255, 255, 0.7);
                        margin-top: 4px;
                    }
                }
            }
            
            .empty-state {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 200px;
                color: #666;
                
                .empty-icon {
                    font-size: 48px;
                    margin-bottom: 12px;
                    opacity: 0.5;
                }
                
                .empty-text {
                    font-size: 14px;
                }
            }
        }
    }
    
    .as-chat-footer {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 12px 16px;
        
        .as-chat-footer-main {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            
            .as-chat-opt {
                display: flex;
                gap: 8px;
                
                .opt-btn {
                    background: none;
                    border: none;
                    font-size: 20px;
                    cursor: pointer;
                    padding: 8px;
                    border-radius: 50%;
                    transition: all 0.2s;
                    
                    &:hover {
                        background-color: rgba(0, 0, 0, 0.05);
                        transform: scale(1.1);
                    }
                }
            }
            
            .as-chat-input {
                flex: 1;
                
                textarea {
                    width: 100%;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    border-radius: 20px;
                    padding: 12px 16px;
                    font-size: 14px;
                    resize: none;
                    outline: none;
                    transition: all 0.2s;
                    background: rgba(255, 255, 255, 0.8);
                    max-height: 120px;
                    
                    &:focus {
                        border-color: #667eea;
                        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
                    }
                    
                    &::placeholder {
                        color: #999;
                    }
                }
            }
            
            .as-chat-btn {
                .send-btn {
                    background: linear-gradient(135deg, #667eea, #764ba2);
                    border: none;
                    border-radius: 20px;
                    padding: 10px 20px;
                    color: white;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s;
                    min-width: 60px;
                    
                    &:hover:not(:disabled) {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
                    }
                    
                    &:active {
                        transform: translateY(0);
                    }
                    
                    &:disabled {
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
                }
            }
        }
    }
}

/* 动画效果 */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 滚动条样式 */
.as-chat-body::-webkit-scrollbar {
    width: 6px;
}

.as-chat-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.as-chat-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.as-chat-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .as-chat-room {
        .as-chat-header {
            padding: 8px 12px;
            
            .as-chat-header-content {
                .as-chat-info {
                    .as-chat-avatar {
                        .avatar-placeholder {
                            width: 36px;
                            height: 36px;
                        }
                    }
                    
                    .as-chat-details {
                        .as-chat-tit {
                            font-size: 15px;
                        }
                    }
                }
            }
        }
        
        .as-chat-body {
            padding: 12px;
            
            .as-chat-con {
                .message-container {
                    .message-bubble {
                        max-width: 85%;
                        padding: 10px 14px;
                        
                        .message-content {
                            font-size: 13px;
                        }
                    }
                }
            }
        }
        
        .as-chat-footer {
            padding: 8px 12px;
            
            .as-chat-footer-main {
                .as-chat-input {
                    textarea {
                        padding: 10px 14px;
                        font-size: 13px;
                    }
                }
                
                .as-chat-btn {
                    .send-btn {
                        padding: 8px 16px;
                        font-size: 13px;
                        min-width: 50px;
                    }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .as-chat-room {
        .as-chat-header {
            .as-chat-header-content {
                .as-chat-info {
                    .as-chat-details {
                        .as-chat-tit {
                            font-size: 14px;
                        }
                        
                        .as-chat-status {
                            font-size: 11px;
                        }
                    }
                }
            }
        }
        
        .as-chat-body {
            padding: 8px;
            
            .as-chat-con {
                .message-container {
                    margin-bottom: 12px;
                    
                    .message-bubble {
                        max-width: 90%;
                        padding: 8px 12px;
                        
                        .message-content {
                            font-size: 12px;
                        }
                    }
                    
                    .message-avatar {
                        .avatar {
                            width: 28px;
                            height: 28px;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        
        .as-chat-footer {
            .as-chat-footer-main {
                gap: 8px;
                
                .as-chat-opt {
                    .opt-btn {
                        font-size: 18px;
                        padding: 6px;
                    }
                }
                
                .as-chat-input {
                    textarea {
                        padding: 8px 12px;
                        font-size: 12px;
                    }
                }
                
                .as-chat-btn {
                    .send-btn {
                        padding: 6px 12px;
                        font-size: 12px;
                        min-width: 45px;
                    }
                }
            }
        }
    }
}
</style>